<template>
    <a-modal v-bind="defaultModalProps" v-model:open="open" :footer="null" closable :centered="false" :mask-closable="false"
        :body-style="{ padding: 0 }" class="GpResumeDetailModal" :z-index="10" @cancel="handleCancel">
        <div class="relative box-border h-screen flex flex-col">
            <template v-if="showData && showData.available.length > 1">
                <!-- 左边箭头 -->
                <div @click="handleStep('prev')" :class="disableState.prev ? '!cursor-not-allowed' : 'touchable-opacity'"
                    class="absolute flex flex-row justify-center items-center rounded-full size-[56px] text-white  bg-[#58595b] left-arrow">
                    <GpFontIcon name="icon-jiantou_zuo" />
                </div>
                <!-- 右边箭头 -->
                <div @click="handleStep('next')" :class="disableState.next ? '!cursor-not-allowed' : 'touchable-opacity'"
                    class="absolute flex flex-row justify-center items-center rounded-full size-[56px] text-white  bg-[#58595b] right-arrow">
                    <GpFontIcon name="icon-jiantou_you" />
                </div>
            </template>
            <header
                class="flex-none flex flex-row items-center gap-8 box-border h-12 px-8 border-b border-solid border-b-[#EEEEEE] relative">
                <div class="text-sm text-primary font-bold flex flex-row items-center gap-[6px] touchable-opacity">
                    应聘：{{ relatedResume?.displayPosition || '--' }}
                </div>
                <div class="text-xs text-third">投递时间：{{ relatedResume?.createTimeFormat }}</div>
                <div class="touchable-opacity absolute right-12 top-4 size-[22px] flex justify-center items-center hover:bg-black/6" @click="regenerateTags()">
                    <GpFontIcon name="icon-zhongxinshengcheng" title="刷新" class="!text-base text-black/45 hover:text-black/88" />
                </div>
            </header>
            <div class="flex-1 flex flex-row box-border overflow-hidden">
                <!-- 骨架屏 -->
                <div v-if="loading" class="flex-1 box-border p-8">
                    <a-flex align="center" :gap="32">
                        <a-skeleton-image active size="large" />
                        <a-flex justify="center" vertical :gap="8">
                            <a-skeleton-button style="width: 200px" block active size="small" />
                            <a-skeleton-input style="width: 400px" block active size="small" />
                            <a-skeleton-input style="width: 600px" block active size="small" />
                        </a-flex>
                    </a-flex>
                    <a-skeleton-input class="mt-8" block active size="large" />
                    <a-flex :gap="40" class="mt-8">
                        <a-skeleton-button style="width: 100px" block active size="default" />
                        <a-skeleton-button style="width: 100px" block active size="default" />
                        <a-skeleton-button style="width: 100px" block active size="default" />
                    </a-flex>
                    <div class="mt-8">
                        <a-skeleton-input style="width: 100px" block active size="default" />
                        <div class="grid grid-cols-2 w-full gap-4 mt-3">
                            <a-skeleton-input style="width: 300px" block active size="small" />
                            <a-skeleton-input style="width: 300px" block active size="small" />
                            <a-skeleton-input style="width: 300px" block active size="small" />
                            <a-skeleton-input style="width: 300px" block active size="small" />
                        </div>
                    </div>
                    <div class="mt-8" v-for="item in 4" :key="item">
                        <a-skeleton-input style="width: 100px" block active size="default" />
                        <a-flex :gap="16" vertical class="mt-3 w-full">
                            <a-skeleton-input style="width: 300px" block active size="small" />
                            <a-skeleton-input style="width: 360px" block active size="small" />
                            <a-skeleton-input block active size="large" />
                        </a-flex>
                    </div>
                </div>
                <section v-else class="flex-1 box-border flex flex-col">
                    <div class="flex-1 overflow-auto" v-if="relatedResume">
                        <!-- 个人信息 -->
                        <div class="flex flex-row gap-4 px-8 pt-6 box-border">
                            <img :src="avatar" :width="72" :height="88"
                                class="block flex-none w-[72px] h-[88px] object-cover rounded-[6px] select-none"
                                draggable="false" v-if="avatar"/>
                            <div class="flex-none w-[72px] h-[88px] rounded-[6px] select-none flex flex-row justify-center items-center bg-theme text-white text-xl font-bold" v-else>
                                {{ relatedResume?.name?.charAt?.(0) }}
                            </div>
                            <div class="flex-1">
                                <div class="flex flex-row items-center justify-between">
                                    <span class="text-primary text-[18px] !leading-[28px] font-bold">{{
                                        relatedResume?.name }}</span>
                                </div>
                                <div class="text-primary text-sm !leading-5 mt-[2px]">
                                    <a-space>
                                        <template #split>
                                            <span class="block w-px h-2 bg-[#ACAEB2]"></span>
                                        </template>
                                        <span>
                                            {{ mapGender.get(relatedResume?.gender!) }}
                                        </span>
                                        <span v-if="relatedResume?.age">
                                            {{ relatedResume?.age
                                            }}岁{{relatedResume?.birthday ? `（${ relatedResume?.birthday.split('T')[0] }）` : ''}}
                                        </span>
                                        <span v-if="relatedResume?.address && relatedResume?.address !== '--'">
                                            {{ relatedResume?.address }}
                                        </span>
                                        <span v-if="relatedResume?.experienceDesc">
                                            {{ relatedResume?.experienceDesc }}
                                        </span>
                                        <span v-if="relatedResume?.education">
                                            {{ mapEducation.get(relatedResume?.education!) }}
                                        </span>
                                        <span v-if="relatedResume?.schoolExps && relatedResume?.schoolExps.length > 0">
                                            {{ relatedResume.schoolExps[0].school }}
                                        </span>
                                    </a-space>

                                </div>
                                <a-space :size="40" class="!mt-2">
                                    <Description label="手机">
                                        {{ relatedResume?.mobile ?? '--' }}
                                    </Description>
                                    <Description label="微信">
                                        {{ relatedResume?.weChat ?? '--' }}
                                    </Description>
                                    <Description label="邮箱">
                                        {{ relatedResume?.email ?? '--' }}
                                    </Description>
                                </a-space>
                                <GpResumeTag disInteract class="mt-[10px]" v-if="relatedResume" :key="relatedResume.id!" :resume-id="relatedResume.id!" v-model:tags="relatedResume.tags" :limit-tag="false" @success="refreshInfo()"/>
                            </div>
                        </div>
                        <div v-if="!disInteract" class="h-10 mx-8 mt-4 box-border rounded-lg border border-solid border-[#EEEEEE] flex flex-row items-center px-4 chatai">
                            <img src="/images/ai-pencil.png" :width="20" :height="20" class="size-5 block object-cover mr-[7px]" />
                            <div class="ai-evaluate">AI 简历评估</div>
                            <GpResumeFen :resume="relatedResume" @success="refreshInfo" style="margin-left: auto;"/>
                        </div>
                        <!-- tabs -->
                        <a-tabs v-model:activeKey="activeKey" class="!mt-3"
                            :tab-bar-style="{ paddingInline: '32px' }" :tab-bar-gutter="40">
                            <a-tab-pane key="1"
                                :style="{ paddingInlineStart: '32px', paddingInlineEnd: '116px' }">
                                <template #tab>
                                    <span class="text-base text-third">简历详情</span>
                                </template>
                                <!-- 求职意向 -->
                                <div class="mb-8">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-qiuzhiyixiang" class="!text-[20px] font-normal" />
                                        求职意向
                                    </div>
                                    <div class="mt-4">
                                        <div class="grid grid-cols-2 gap-3 ml-[26px]">
                                            <Description label="期望职位">{{ relatedResume?.position ?? '--' }}
                                            </Description>
                                            <Description label="期望薪资">{{ relatedResume?.salaryMin &&
                                                relatedResume?.salaryMax ? `${
                                                relatedResume.salaryMin}-${ relatedResume.salaryMax}元/月` : '--'}}
                                            </Description>
                                            <Description label="意向城市">{{ relatedResume?.address ?? '--' }}
                                            </Description>
                                            <Description label="工作类型">{{ mapJobType.get(relatedResume?.workMode!) }}
                                            </Description>
                                        </div>
                                    </div>
                                </div>
                                <!-- 工作经历 -->
                                <div class="mb-8"
                                    v-if="relatedResume?.workExps && relatedResume.workExps.length > 0">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-gongzuojingli" class="!text-[20px] font-normal" />
                                        工作经历
                                    </div>
                                    <div class="mt-4">
                                        <Timeline :offset="5">
                                            <TimelineItem v-for="(item, index) in relatedResume.workExps"
                                                :key="index">
                                                <div class="text-sm text-[#496EA9]">
                                                    {{ item.timeRange }}{{ item.duration ? ` (${item.duration})` :
                                                    '' }}
                                                </div>
                                                <div
                                                    class="flex flex-row items-center gap-8 font-medium text-primary text-sm mt-3">
                                                    <span>{{ item.companyName }}</span>
                                                    <span>{{ item.positionName }}</span>
                                                    <!-- <span>运营部(缺少字段)</span> -->
                                                </div>
                                                <div
                                                    class="bg-[#FAFBFC] rounded-sm px-3 py-[10px] text-sm !leading-8 text-third mt-3 whitespace-pre-line">
                                                    {{ item.content }}
                                                </div>
                                            </TimelineItem>
                                        </Timeline>
                                    </div>
                                </div>
                                <!-- 教育经历 -->
                                <div class="mb-8"
                                    v-if="relatedResume?.educationExps && relatedResume.educationExps.length > 0">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-jiaoyujingli" class="!text-[20px] font-normal" />
                                        教育经历
                                    </div>
                                    <div class="mt-4 ml-[26px]">
                                        <ul class="flex flex-col gap-1">
                                            <li class="flex flex-row items-center text-primary font-medium text-sm"
                                                v-for="(item, index) in relatedResume.educationExps" :key="index">
                                                <span>{{ item.schoolName }}</span>
                                                <span class="ml-8">{{ item.professionName }}</span>
                                                <span class="text-third font-normal ml-auto">{{ item.timeRange }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- 项目经历 -->
                                <div class="mb-8"
                                    v-if="relatedResume?.projectExps && relatedResume.projectExps.length > 0">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-zaixiaojingli" class="!text-[20px] font-normal" />
                                        项目经历
                                    </div>
                                    <div class="mt-4 ml-[7px]">
                                        <ul class="flex flex-col gap-6">
                                            <li v-for="(item, index) in relatedResume.projectExps" :key="index">
                                                <h6 class="text-sm text-primary font-medium"><span
                                                        class="pr-[6px]">{{ index +
                                                        1}}.</span>{{ item.name }}</h6>
                                                <p class="text-sm text-[#496EA9] mt-[10px] ml-[1em]">
                                                    <span class="pr-8" v-if="item.timeRange || item.duration">{{ item.timeRange }}{{ item.duration ? ` (${item.duration
                                                        })` : '' }}</span>
                                                    <span>{{ item.position }}{{ item.company ?
                                                        `(${item.company})` : '' }}</span>
                                                </p>
                                                <p
                                                    class="text-sm text-primary !leading-6 mt-[10px] ml-[1em] whitespace-pre-line">
                                                    {{ item.content }}
                                                </p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- 在校经历 -->
                                <div class="mb-8"
                                    v-if="relatedResume?.schoolExps && relatedResume.schoolExps.length > 0">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-zaixiaojingli" class="!text-[20px] font-normal" />
                                        在校经历
                                    </div>
                                    <div class="mt-4">
                                        <Timeline :offset="5">
                                            <TimelineItem v-for="(item, index) in relatedResume.schoolExps"
                                                :key="index">
                                                <div class="text-sm text-[#496EA9]">
                                                    {{ item.timeRange }}{{ item.duration ? ` (${item.duration})` :
                                                    '' }}
                                                </div>
                                                <div
                                                    class="flex flex-row items-center gap-8 font-medium text-primary text-sm mt-3">
                                                    <span>{{ item.school }}</span>
                                                    <span>{{ item.profession }}</span>
                                                </div>
                                                <div
                                                    class="bg-[#FAFBFC] rounded-sm px-3 py-[10px] text-sm !leading-8 text-third mt-3 whitespace-pre-line">
                                                    {{ item.content }}
                                                </div>
                                            </TimelineItem>
                                        </Timeline>
                                    </div>
                                </div>
                                <!-- 在校荣誉 -->
                                <div class="mb-8" v-if="relatedResume?.schoolHonor">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-rongyuzhengshu" class="!text-[20px] font-normal" />
                                        在校荣誉
                                    </div>
                                    <div class="mt-4">
                                        <div v-html="marked(relatedResume.schoolHonor, { breaks: true, gfm: true })"
                                            class="marked"></div>
                                    </div>
                                </div>
                                <!-- 荣誉证书 -->
                                <div class="mb-8" v-if="relatedResume?.honorCertificate">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-rongyuzhengshu" class="!text-[20px] font-normal" />
                                        荣誉证书
                                    </div>
                                    <div class="mt-4">
                                        <div v-html="marked(relatedResume.honorCertificate, { breaks: true, gfm: true })"
                                            class="marked"></div>
                                    </div>
                                </div>
                                <!-- 语言技能 -->
                                <div class="mb-8" v-if="relatedResume?.languageSkill">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-jinengtechang" class="!text-[20px] font-normal" />
                                        语言技能
                                    </div>
                                    <div class="mt-4">
                                        <div v-html="marked(relatedResume.languageSkill, { breaks: true, gfm: true })"
                                            class="marked"></div>
                                    </div>
                                </div>
                                <!-- 职业技能 -->
                                <div class="mb-8" v-if="relatedResume?.professionSkill">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-jinengtechang" class="!text-[20px] font-normal" />
                                        职业技能
                                    </div>
                                    <div class="mt-4">
                                        <div v-html="marked(relatedResume.professionSkill, { breaks: true, gfm: true })"
                                            class="marked"></div>
                                    </div>
                                </div>
                                <!-- 自我评价 -->
                                <div class="mb-8" v-if="relatedResume?.introduction">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-ziwopingjia" class="!text-[20px] font-normal" />
                                        自我评价
                                    </div>
                                    <div class="mt-4 ml-[26px]">
                                        <div v-html="marked(relatedResume.introduction, { breaks: true, gfm: true })"
                                            class="marked"></div>
                                    </div>
                                </div>
                                <!-- 自定义模块 -->
                                <div class="mb-8" v-if="relatedResume?.extends"
                                    v-for="extend of relatedResume.extends" :key="extend.name">
                                    <div
                                        class="flex flex-row items-center gap-[6px] text-lg font-bold text-[#324366]">
                                        <GpFontIcon name="icon-zidingyi" class="!text-[20px] font-normal" />
                                        自定义模块
                                    </div>
                                    <div class="mt-4" v-if="extend.content">
                                        <div v-html="marked(extend.content, { breaks: true, gfm: true })"
                                            class="marked"></div>
                                    </div>
                                </div>
                            </a-tab-pane>
                            <a-tab-pane key="2">
                                <template #tab>
                                    <span class="text-base text-third">附件简历</span>
                                </template>
                                <iframe :src="relatedResume?.attachment" width="100%" height="634" frameborder="no"
                                    framescrolling="yes" class="w-full box-border"></iframe>
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                    <!-- 底部 -->
                    <div v-if="relatedResume && showData?.interviewId"
                        class="flex-none h-[72px] flex flex-row items-center justify-end px-8 border-t border-solid border-t-[#EEEEEE]">
                        <a-button type="primary" size="large" class="!rounded-sm !text-sm" @click="openFeedBack">
                            面试反馈
                        </a-button>
                    </div>
                </section>
                <section class="flex-none w-[500px] border-l border-solid border-l-[#EEEEEE]" v-if="!disInteract">
                    <GpChatView :resume-id="relatedResume.id" v-if="relatedResume?.id" />          
                </section>
            </div>
        </div>
    </a-modal>
    <InterviewFeedBack ref="interviewFeedBackRef" v-if="showData?.interviewId" />
</template>
<script lang="ts" setup>
import { marked } from "marked"
import { getMychatChatresumeChatId, postMychatChatresumerefreshtagChatId } from "@/api/siderBar/myChat";
import type { Exposed, ShowData } from './type';
import { mapGender, mapEducation, mapJobType } from '@/constants/enum-options';
import { defaultModalProps } from '@/constants/comp-setting';
import type { Exposed as InterviewFeedBackExposed } from '@/components/InterviewFeedBack/types';
import type { MemberChatDetailResult } from "@/api/siderBar/model";
defineOptions({
    name: 'GpResumeDetailModal',
    inheritAttrs: false
});
defineExpose<Exposed>({
    show(data) {
        showData.value = data
        assign(data.current)
        open.value = true
        refreshInfo()
    },
})
const emit = defineEmits<{
    close: []
    getResume: [resume: MemberChatDetailResult]
}>()
const { disInteract = false, detailEndpoint } = defineProps<{
    disInteract?: boolean
    detailEndpoint?: typeof getMychatChatresumeChatId
}>()
const open = ref(false)
const showData = ref<INullable<ShowData>>(null)
const { data: relatedResume, runAsync: refreshInfo, loading } = useRequest(() => (detailEndpoint ?? getMychatChatresumeChatId)(showData.value?.current!), {
    manual: true,
    onSuccess(data) {
        emit('getResume', data)
    }
})
const avatar = computed(() => relatedResume.value?.head)
const activeKey = ref('1');
function handleCancel() {
    emit("close")
    showData.value = null
}
const {
    assign,
    disableState,
    prev,
    next,
} = usePrevNext(() => showData.value?.available ?? [])
function handleStep(action: 'prev' | 'next') {
    const handler = action === 'prev' ? prev : next
    handler(nextValue => {
        showData.value!.current = nextValue
        refreshInfo()
    })
}
async function regenerateTags() {
    await postMychatChatresumerefreshtagChatId(relatedResume.value?.id!)
    refreshInfo()
}
const interviewFeedBackRef = ref<INullable<InterviewFeedBackExposed>>(null)
function openFeedBack() {
    if (interviewFeedBackRef.value) {
        interviewFeedBackRef.value.open({
            interviewId: toValue(showData)!.interviewId!
        })
    }
}
</script>
<style lang="less">
.GpResumeDetailModal {
    width: 1262px !important;
    top: 0 !important;
    padding: 0 !important;

    .ant-modal-content {
        padding: 0;
    }

    .left-arrow,
    .right-arrow {
        top: 50%;
    }

    .left-arrow {
        transform: translate(-100%, -50%);
        left: -24px;
    }

    .right-arrow {
        transform: translate(100%, -50%);
        right: -24px;
    }
    .ant-tabs-tab.ant-tabs-tab-active span {
        color: var(--color-theme);
        font-weight: 700;
    }
    .chatai {
        background: linear-gradient(92deg, #F0F7FF 3.84%, #EFF5FB 42.31%, #F3EEF8 66.35%, #F0F7FF 100%);
        .ai-evaluate {
            font-size: 14px;
            font-weight: 700;
            line-height: 20px;
            background: linear-gradient(90deg, #1640EE 31.94%, #A454FA 76.78%, #FA5470 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

@media screen and (min-width: 1920px) {
    :root .GpResumeDetailModal {
        width: 1334px !important;

        .left-arrow {
            left: -100px;
        }

        .right-arrow {
            right: -100px;
        }
    }
}
</style>